<template>
  <el-tabs
      v-model="editableTabsValue"
      type="border-card	"
      closable
      @tab-remove="removeTab"
      @tab-click="clickTab"
  >
    <el-tab-pane
        v-for="item in editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
    >
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: "Tabs",
  data() {
    return {};
  },
  computed: {
    // 菜单标签
    editableTabs: {
      get() {
        return this.$store.state.menus.editableTabs;
      },
      set(val) {
        this.$store.state.menus.editableTabs = val;
      },
    },

    //
    editableTabsValue: {
      get() {
        return this.$store.state.menus.editableTabsValue;
      },
      set(val) {
        this.$store.state.menus.editableTabsValue = val;
      },
    },
  },
  methods: {
    // 去除标签
    removeTab(targetName) {
      let tabs = this.editableTabs;

      let activeName = this.editableTabsValue;

      if (activeName === "Index") {
        return;
      }

      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName);

      this.$router.push({name: activeName});
    },
    clickTab(target) {
      this.$router.push({name: target.name});
    },
  },
};
</script>

<style>
.el-tabs {
  line-height: 8px;
  color: rgb(129, 129, 150);
}
.el-tabs__item:hover {
  color: rgb(65, 65, 70);
  font-weight: bold;
}
.el-tabs__item.is-active {
  color: rgb(255, 208, 75);
  font-weight: bold;
}
</style>